<template>
  <div class="Box">
    <!-- 标题 -->
    <div>
      <el-row
        :gutter="20"
        type="flex"
        justify="space-between"
        style="padding-right: 10px; border-bottom: 1px solid #ebeef5"
      >
        <el-col :span="22">
          <span style="font-weight: 800; font-size: 15px">{{ title }}</span>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            size="mini"
            plain
            @click="handeAdd"
          >返回列表</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- from表单 -->
    <div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="right"
        label-width="120px"
        class="form"
      >
        <el-row :gutter="20">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="学科方向" prop="subject_id">
                <el-select
                  v-model="form.subject_id"
                  placeholder="请选择学科"
                  size="mini"
                  clearable
                  @change="change"
                >
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目录信息" prop="subject_id">
                <el-select
                  v-model="form.directory_id"
                  placeholder="请选择学科"
                  size="mini"
                  clearable
                >
                  <el-option
                    v-for="item in subjectList[
                      subjectList.findIndex((item) => {
                        return item.id === form.subject_id
                      })
                    ]?.children"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标签信息" prop="subject_id">
                <el-select
                  v-model="tagId"
                  placeholder="请选择标签"
                  size="mini"
                  clearable
                  @change="changeTag"
                >
                  <el-option
                    v-for="item in subjectList[
                      subjectList.findIndex((item) => {
                        return item.id === form.subject_id
                      })
                    ]?.children[
                      subjectList[
                        subjectList.findIndex((item) => {
                          return item.id === form.subject_id
                        })
                      ]?.children.findIndex((item) => {
                        return item.id === form.directory_id
                      })
                    ]?.children"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <el-row :gutter="20">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="试题难度" prop="subject_id">
                <el-radio-group v-model="form.difficulty">
                  <el-radio :label="1">简单</el-radio>
                  <el-radio :label="2">中等</el-radio>
                  <el-radio :label="3">较难</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="试题类型" prop="subject_id">
                <el-select
                  v-model="form.quest_type"
                  clearable
                  placeholder="选择题型"
                  size="mini"
                >
                  <el-option label="单选题" :value="1" />
                  <el-option label="多选题" :value="2" />
                  <el-option label="判断题" :value="3" />
                  <el-option label="简答题" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否面试真题" prop="subject_id">
                <el-radio-group v-model="form.is_true_question">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <el-row :gutter="20" style="height: 300px">
          <el-col>
            <el-form-item label="题干信息">
              <quill-editor
                ref="myLQuillEditor"
                v-model="form.question"
                :options="editorOption"
                class="editor"
                style="height: 200px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="试题答案">
              <quill-editor
                ref="myLQuillEditor"
                v-model="form.quest_answer"
                :options="editorOption"
                class="editor"
                style="height: 200px"
              />
              <!-- <el-table
                ref="multipleTable"
                :data="selectData"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column label="单选项">
                  <template #default="{row}">
                    <el-checkbox v-model="row.is_true">{{ row.code }}</el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column label="单选项内容">
                  <template #default="{row}">
                    <el-input
                      v-model="row.content"
                      prop="content"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="选项图片"
                  width="120"
                  property="pic"
                />

              </el-table> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="height: 300px">
          <el-col>
            <el-form-item label="答案解析">
              <quill-editor
                ref="myLQuillEditor"
                v-model="form.quest_remark"
                :options="editorOption2"
                class="editor"
                style="height: 200px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="padding-left: 150px; padding-top: 20px">
          <el-button size="small" @click="handeAdd">取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="submit"
          >提交</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getSubjectTree,
  addQuestion,
  updataQuestion,
  putQuestion
} from '@/api/question'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'AddEdit',
  components: {
    quillEditor
  },
  props: {
    questionList: {
      type: Array,
      default: () => {
        return []
      }
    },
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      tagId: [],
      editorOption: {
        theme: 'snow',
        placeholder: '请输入题干内容'
        // Some Quill optiosn...
      },
      editorOption2: {
        theme: 'snow',
        placeholder: '请输入答案解析内容'
        // Some Quill optiosn...
      },
      subjectList: [],
      title: '新增试题',
      selectData: [
        { code: 'A', content: '', is_true: false, pic: '' },
        { code: 'B', content: '', is_true: false, pic: '' },
        { code: 'C', content: '', is_true: false, pic: '' },
        { code: 'D', content: '', is_true: false, pic: '' }
      ],
      form: {
        quest_options: [],
        quest_answer: null,
        quest_remark: null,
        question: null,
        subject_id: null,
        directory_id: null,
        tag_id: [],
        difficulty: 1,
        quest_type: null,
        is_true_question: null
      },
      rules: {
        subject_id: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  async created() {
    console.log(this.id)
    const res = await getSubjectTree()
    this.subjectList = res.data
    if (this.id) {
      const res = await updataQuestion(this.id)
      console.log(res)
      this.form = res.data
      this.tagId = this.form.tag_id
      this.form.tag_id = [this.tagId]
      this.title = '修改试题'
    } else {
      this.title = '新增试题'
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log(val)
    },
    changeTag() {
      this.form.tag_id = [this.tagId]
    },
    change() {
      this.form.directory_id = null
      this.form.tag_id = null
    },
    async submit() {
      if (this.form.id) {
        await putQuestion(this.form)
        this.$message.success('编辑成功')
      } else {
        await addQuestion(this.form)
        this.$message.success('添加成功')
      }
      this.$emit('changeAdd', true)
    },
    handeAdd() {
      this.$emit('changeAdd', true)
    }
  }
}
</script>

<style  lang="scss" scoped>
.Box {
  // margin: 20px
  background-color: #ffffff;
  padding: 10px;
  .el-form-item {
    margin-bottom: 0px;
  }
}
</style>
